<!--
 * @Author: weiting112 10254483+weiting112@user.noreply.gitee.com
 * @Date: 2022-09-05 15:57:19
 * @LastEditors: weiting112 10254483+weiting112@user.noreply.gitee.com
 * @LastEditTime: 2022-09-07 22:11:07
 * @FilePath: \xxtx-ui\src\views\Article.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 头部 -->
    <Header></Header>

    <!-- 体部 -->
    <div class="content">
      <div class="wrapper">
        <div class="content_main">
          <div class="left">
            <div class="t">
              <p>{{ name }}</p>
              <a href="#">当前位置：新闻网首页>{{ name }}</a>
            </div>
            <div class="content_list">
              <ul>
                <li v-for="item in columns" :key="item.id" @click='toDetails(item.id,item.category.name)'>
                  <a>
                    <img :src="item.cover" alt="" />
                    <div class="text">
                      <a  class="one">{{ item.title }}</a>
                      <a  class="two">{{ ToText(item.content) }}</a>
                      <a  class="three">
                        <i></i>
                        {{ item.publishTime | fmtDate }}
                      </a>
                    </div>
                  </a>
                </li>
              </ul>

              <!-- 分页按钮 -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.page"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>

          <div class="right">
            <div class="t">
              <p class="txt">今日交大</p>
            </div>
            <div class="right_list">
              <ul>
                <li v-for="item in jinrejiaoda.aritcle" :key="item.id">
                  <a href="" class="r_text">{{ item.title }}</a>
                  <a href="" class="three">
                    <i></i>
                    {{ item.publishTime | fmtDate }}
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 体部 -->

    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      id:"",
      total: 0,
      // 顶部导航背景图片配置
      name: "",
      // 分类参数
      categories: [],
      // 栏目信息
      columns: [],
      // 今日交大
      jinrejiaoda: [],
      //存放分页对象
      params: {
        page: 1,
        pageSize: 5,
      },
    };
  },
  // 监听器属性/侦听器属性
  // 监听数据类型变化
  // 监听基本数据类型使用浅监听
  // 监听引用数据类型使用深度监听
  watch: {
    "$route.query": {
      handler() {
        this.name = this.$route.query.name;
        this.id = this.$route.query.id;
        this.getArticleById();
      },
      deep: true,
    },
  },
  methods: {
     // 跳转到文章详情页面
     toDetails(id,name){
      // a-->item.id
      // 编程式导航
      this.$router.push({
        path:'/list',
        query:{id,name}
      })
    },
    // 查找所有资讯分类
    async FindAllCate() {
      let res = await get("/index/article/findCategoryArticles");
      // console.log(res);
      this.categories = res.data;
      this.jinrejiaoda = this.categories[12];
    },
    // 根据栏目id获取对应栏目文章
    async getArticleById() {
      this.params.categoryId = this.id;
      let res = await get("/index/article/pageQuery", this.params);
      // console.log(res, "4444");
      this.columns = res.data.list;
      this.total = res.data.total;
    },
    // 转化成纯文本
    ToText(HTML) {
      var input = HTML;
      return input
        .replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, "")
        .replace(/<[^>]+?>/g, "")
        .replace(/\s+/g, " ")
        .replace(/ /g, " ")
        .replace(/>/g, " ");
    },
    // 监听页码条数发生改变的事件处理程序
    handleSizeChange(pageSize) {
      // console.log(pageSize, `每页${pageSize}条数`);
      this.params.pageSize = pageSize;
      this.params.page = 1;
      this.getArticleById();
    },
    // 监听页码发生改变得方法
    handleCurrentChange(page) {
      // console.log(page, `第${page}页`);
      this.params.page = page;
      this.getArticleById();
    },
  },

  created() {
    // 栏目名称
    this.name = this.$route.query.name;
    //  console.log(this.$route.query);
    // 栏目id
    this.id = this.$route.query.id;
    this.getArticleById();
    this.FindAllCate();
  },
};
</script>

<style lang="scss">
// 背景图片
.bgBackground {
  width: 100%;
  height: 100%;
}

// 体部样式
.content {
  position: relative;
  margin-top: -55px;
  .t {
    padding-top: 24px;
    border-bottom: 1px solid #b3b3b3;
    padding-bottom: 10px;
    height: 28px;
    margin-bottom: 20px;
    p {
      float: left;
      font-weight: normal;
      margin: 0;
      font-size: 20px;
      color: #b12922;
      padding-bottom: 10px;
      border-bottom: 2px solid #b12922;
    }
    span {
      font-size: 18px;
      color: #b22923;
      font-weight: bold;
    }
    a {
      float: right;
      font-size: 14px;
      color: #333333;
      opacity: 0.5;
    }
  }
  .three {
    width: 90px;
    i {
      background: url("../assets/yxtx/date2.png");
      width: 13px;
      height: 13px;
      display: block;
      float: left;
      margin-top: 3px;
      margin-right: 5px;
    }
  }
  .content_main {
    display: flex;
    justify-content: space-evenly;
    .left {
      width: 850px;
      background: #fff;
      padding: 0 30px;

      .content_list {
        ul {
          // margin-top: 25px;
          li:hover a {
            background: #b12922;
          }
          li:hover .text .one {
            color: #fff;
          }
          li:hover .text .three i {
            background: url("../assets/yxtx/date-white.png");
          }
          li {
            border-bottom: 1px dashed #cccccc;
            padding-bottom: 30px;
            margin-bottom: 30px;
            a {
              display: flex;
              justify-content: space-between;
              img {
                width: 193px;
                height: 145px;
              }
              .text {
                box-sizing: border-box;
                padding: 12px 10px 14px 30px;
                width: 640px;
                .one {
                  font-size: 15px;
                  color: #000;
                }
                .two {
                  font-size: 13px;
                  color: #808080;
                  display: block;
                  height: 50px;
                  line-height: 25px;
                  padding: 15px 15px;
                  text-overflow: ellipsis; //多余的部分显示省略号
                  overflow: hidden; //多余的部分隐藏
                  white-space: nowrap; //让文字强制一行显示
                }
              }
            }
          }
        }
      }
    }
    .right {
      box-sizing: border-box;
      background: #fff;
      padding: 0 32px;
      height: 600px;
      width: 382px;
      .txt {
        font-size: 20px;
        color: #b12922;
        font-weight: bold;
        padding-bottom: 10px;
        border-bottom: 2px solid #b12922;
      }
      .right_list {
        ul {
          li {
            padding: 17px 0;
            border-bottom: 1px dashed #e5e5e5;
            .r_text {
              display: block;
              font-size: 15px;
              color: #333333;
              line-height: 35px;
              text-overflow: ellipsis; //多余的部分显示省略号
              overflow: hidden; //多余的部分隐藏
              white-space: nowrap; //让文字强制一行显示
            }
          }
        }
      }
    }
  }
}
</style>